<template>
  <div id="app">
    <transition name="slide">
      <header-vue v-show="isShow"></header-vue>
    </transition>

    <transition name="slide2">
      <keep-alive>
        <router-view class="xxx" />
      </keep-alive>
    </transition>
  </div>
</template>
<script>
import HeaderVue from "./components/Header.vue";

export default {
  data() {
    return {
      isShow: true,
      isTop: 0,
    };
  },
  components: {
    HeaderVue,
  },
  created() {
    this.init();
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  methods: {
    init() {
      //判断是否pc端
      console.log("用户信息", navigator);
      let IOS = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      localStorage.setItem("IOS", IOS == null ? "pc" : "mobile");
    },
    handleScroll() {
      let scorllHeight =
        document.documentElement.scrollTop || document.body.scrollTop;
      let scoll = scorllHeight - this.isTop;
      this.isTop = scorllHeight;
      if (scoll < 0) {
        console.log("test-up", scoll, this.isTop);
        this.isShow = true;
      } else if (scorllHeight > 300) {
        console.log("test-dow");
        this.isShow = false;
      }
      // if (scorllHeight > 400) {
      //   this.isShow = false;
      // } else {
      //   this.isShow = true;
      // }
      console.log("scoll=>>", scorllHeight);
    },
  },
};
</script>
<style lang="scss">
@import url("~@/assets/css/base.scss");

.xxx {
  padding-top: 70px;
}
</style>
